<template>
  <div>
    <div class="header">
      <el-form ref="search">
        <el-form-item label="合作商搜索：">
          <el-input
            v-model="form.name"
            style="width: 200px"
            placeholder="请输入"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchFn"
            class="btn1"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      :title="getShow"
      :visible.sync="visible"
      width="35%"
      @close="closeFn"
    >
      <el-form
        label-width="120px"
        :model="formDate"
        :rules="rules"
        validate
        ref="box"
      >
        <el-form-item label="合作商名称" prop="name">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.name"
            show-word-limit
            maxlength="15"
            :disabled="type === 'see' ? true : false"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.contact"
            show-word-limit
            maxlength="15"
            :disabled="type === 'see' ? true : false"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.mobile"
            show-word-limit
            maxlength="11"
            :disabled="type === 'see' ? true : false"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分成比例%" prop="ratio">
          <el-input-number
            v-model="formDate.ratio"
            controls-position="right"
            style="width: 100%"
            placeholder="请输入内容"
            :disabled="type === 'see' ? true : false"
            :min="0"
            :max="100"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="账号" prop="account" v-if="type === 'add'">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.account"
            show-word-limit
            maxlength="15"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="type === 'add'">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.password"
            show-word-limit
            maxlength="15"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="closeFn"
          style="background-color: #fbf4f0"
          :class="type === 'see' ? 'show' : ''"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="addRegion"
          :class="type === 'see' ? 'show' : ''"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="table">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="getArea"
        >新建</el-button
      >
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="合作商名称" width="150">
        </el-table-column>
        <el-table-column prop="account" label="账号" width="150">
        </el-table-column>
        <el-table-column prop="vmCount" label="设备数量" width="120">
        </el-table-column>
        <el-table-column prop="ratio" label="分成比例" width="100">
        </el-table-column>
        <el-table-column prop="contact" label="联系人" width="150">
        </el-table-column>
        <el-table-column prop="mobile" label="联系电话" width="120">
        </el-table-column>

        <el-table-column label="操作" id="index">
          <template #default="{ row }">
            <div class="actions">
              <span
                style="color: blue; cursor: pointer"
                @click="resetFn(row.id)"
                >重置密码</span
              >
              <span style="color: blue; cursor: pointer" @click="seeFn(row.id)"
                >查看详情</span
              >
              <span
                style="color: blue; cursor: pointer"
                @click="changeFn(row.id)"
                >修改</span
              >
              <span
                style="color: red; cursor: pointer"
                @click="delRegion(row.id)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
     <!-- 分页 -->
      <el-pagination
        v-if="page.totalCount > 10"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageIndex"
        :page-size="page.pageSize"
        :total="page.totalCount"
        layout="slot,prev, next"
      >
        <template>
          <span class="el-pagination__total"
            >共{{ page.totalCount }}条记录&nbsp;&nbsp;第&nbsp;{{
              page.pageIndex
            }}/{{ page.totalPage }}页</span
          >
        </template>
      </el-pagination>
      <!-- 分页 -->
    </div>
  </div>
</template>

<script>
import {
  getServer,
  postServe,
  delServe,
  changeServe,
  resetServe,
  searchServe
} from '@/api/area'
export default {
  created () {
    this.getRegion()
  },
  data () {
    return {
      tableData: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      show1: true,
      show: true,
      visible: false,
      formDate: {
        id: '',
        name: '',
        account: '',
        vmCount: '',
        ratio: '',
        contact: '',
        phone: '',
        mobile: '',
        password: ''
      },
      form: {
        name: ''
      },
      id: '',
      rules: {
        name: [
          { required: true, message: '请输入合作商名称', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        vmCount: [
          { required: true, message: '请输入设备数量', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
          }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      type: 'add'
    }
  },
  methods: {
    async getRegion () {
      const res = await getServer({ ...this.page })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.page.totalCount = Number(res.totalCount)
      this.page.totalPage = Number(res.totalPage)
    },
    handleCurrentChange () {
      this.getServer()
    },
    closeFn () {
      this.visible = false
      this.$refs.box.resetFields()
    },
    getArea () {
      this.visible = true
      this.type = 'add'
      this.id = ''
      this.formDate.name = ''
      this.formDate.mobile = ''
      this.formDate.ratio = ''
      this.formDate.contact = ''
      this.formDate.phone = ''
    },
    async addRegion () {
      await this.$refs.box.validate(async (isOk) => {
        if (isOk) {
          if (this.type === 'add') {
            await postServe(this.formDate)
            this.$message.success('添加成功')
          } else if (this.type === 'pre') {
            console.log(111)
            this.tableData.forEach((item) => {
              // const obj = {}
              if (item.id === this.id) {
                const obj = {
                  id: this.id,
                  name: this.formDate.name,
                  mobile: this.formDate.mobile,
                  ratio: this.formDate.ratio,
                  contact: this.formDate.contact,
                  phone: this.formDate.phone
                }
                console.log(obj)
                changeServe(obj)
              }
              // changeServe(id)
            })
            this.getRegion()
            this.$message.success('修改成功')
          }
          this.$refs.box.resetFields()
          this.visible = false
          this.getRegion()
        }
      })
    },
    async delRegion (id) {
      try {
        await this.$confirm('是否确定删除', '提示')
        await delServe(id)
        this.getRegion()
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.success('取消成功')
      }
    },
    changeFn (id) {
      this.type = 'pre'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          this.id = id
          this.formDate.name = item.name
          this.formDate.mobile = item.mobile
          this.formDate.ratio = item.ratio
          this.formDate.contact = item.contact
        }
        // changeServe(id)
      })
    },
    seeFn (id) {
      this.type = 'see'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          this.id = id
          this.formDate.name = item.name
          this.formDate.mobile = item.mobile
          this.formDate.ratio = item.ratio
          this.formDate.contact = item.contact
        }
        // changeServe(id)
      })
    },
    async searchFn () {
      if (this.form.name === '') {
        this.getRegion()
        this.$message.success('搜索成功')
        if (+this.page.pageIndex !== +this.page.totalPage) {
          this.show1 = false
        }
      } else if (this.form.name) {
        try {
          if (this.form.name) {
            const res = await searchServe({
              pageIndex: this.page.pageIndex,
              pageSize: 10,
              name: this.form.name
            })
            this.$message.success('搜索成功')
            this.tableData = res.currentPageRecords
            console.log(res)
            this.totalCount = res.totalCount
            this.totalPage = res.totalPage

            if (+this.page.pageIndex === +this.page.totalPage) {
              this.show1 = true
            }
            this.tableData.forEach((item, index) => {
              item.index = index + 1 + (this.page.pageIndex - 1) * 10
            })
          }
        } catch (err) {
          this.$message.error('搜索失败')
          this.getRegion()
        }
      }
    },
    async resetFn (id) {
      try {
        await this.$confirm('是否确定重置密码', '提示')
        await resetServe(id)
        this.getRegion()
        this.$message.success('重置密码成功')
      } catch (err) {
        this.$message.success('取消成功')
      }
    }
  },

  computed: {
    getShow () {
      let title = '新增合作商'

      if (this.type === 'add') {
        title = '新增合作商'
      } else if (this.type === 'see') {
        title = '合作商详情'
      } else {
        title = '修改合作商'
      }
      return title
    }
  },
  watch: {},
  filters: {},
  components: {}
}
</script>

<style scoped>
.btn1 {
  background-color: #5f84ff !important;
  border-color: #5f84ff !important;
}
span {
  margin: 5px;
}
.table {
  width: 100%;
  min-height: 200px;
  margin-top: 20px;
}
.el-button {
  background-color: #ff7730;
  border-color: #ff7730;
  margin-left: 20px;
}
.el-table {
  padding-left: 20px;
}
.btn {
  background-color: #d5ddf8;
  border-color: #d5ddf8;
  color: black;
  width: 100px;
  margin-right: 20px;
}
.btnbox {
  float: right;
  margin-right: 100px;
}
.btnspan {
  color: #dbdfe7;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 10px;
  cursor: hand;
}
/* .el-form {
  width: 400px !important;
} */
.show {
  display: none !important;
}
</style>
<style>
.el-dialog__footer {
  text-align: center !important;
}
</style>
